Flutter Http with List

---

Flutter Http and Async Await and List

---

本篇汇集：网络交互、数据解析、列表展示、对话框显示、列表加载等待的显示 >目录： >1、Flutter http using 2、JSON 3、ListView 4、ListView- loading status 5、ListView- Item and item event 6、本篇汇总的效果

1、Flutter http using

依赖：在pubspec.yaml文件中添加Flutter网路模块的依赖

dependencies:
  ...
  http: ^0.11.3+16

网络操作

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);

  }
}

2、JSON

导包

import 'dart:convert';

数据解析

List widgets = [];

setState(() {
  widgets = json.decode(response.body);
});

3、ListView

  body: ListView.builder(
      itemCount: getItemCount(),
      itemBuilder: (BuildContext context, int position) {
        return getItemWidget(position);
      }));




int getItemCount() {
  if (widgets.isEmpty) {
    return 5;
  }
  return widgets.length;
}





Widget getItemWidget(int position) {
  if (widgets.isEmpty) {
    return getEmptyLoadingWidget();
  }
  return getRow(position);
}

4、ListView- loading status

Widget getEmptyLoadingWidget() {
  return Padding(
    padding: EdgeInsets.all(10.0),
    child: Card(
      child: Column(
        children: <Widget>[
          ListTile(
            leading: CircleAvatar(
              child: Text('**'),
            ),
            title: Text(
              "******",
              maxLines: 1,
              style: TextStyle(
                color: Colors.blue,
              ),
              semanticsLabel: 'semanticsLabel',
            ),
            subtitle: Text("******"),
            trailing: Text('******'),
          ),
          Text('努力加载中...'),
        ],
      ),
    ),
  );
}

5、ListView- Item and item event

item event

onLongPress: () {
  if (widgets.isNotEmpty) {
    showAboutDialog(
      applicationName: "Name",
      context: context,
      children: <Widget>[
        Text('Title:${widgets[i]["title"]}'),
        Divider(),
        Text('Body:${widgets[i]["body"]}'),
      ],
    );
  }
},

item

Widget getRow(int i) {
  return Padding(
    padding: EdgeInsets.all(10.0),
    child: Card(
      child: ListTile(
        leading: CircleAvatar(
          child: Text('${widgets[i]["id"]}'),
        ),
        title: Text(
          "Row ${widgets[i]["title"]}",
          maxLines: 1,
          style: TextStyle(
            color: Colors.blue,
          ),
          semanticsLabel: 'semanticsLabel',
        ),
        subtitle: Text("Row ${widgets[i]["body"]}"),
        trailing: Text('userId:${widgets[i]["userId"]}'),
        onTap: () {},
        onLongPress: () {
          if (widgets.isNotEmpty) {
            showAboutDialog(
              applicationName: "Name",
              context: context,
              children: <Widget>[
                Text('Title:${widgets[i]["title"]}'),
                Divider(),
                Text('Body:${widgets[i]["body"]}'),
              ],
            );
          }
        },
      ),
    ),
  );
}

6、本篇汇总的效果

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class ListPage extends StatefulWidget {
  BuildContext mPreContext;
  ListPage(BuildContext preContext) {
    mPreContext = preContext;
  }
  @override
  _ListState createState() {
    // TODO: implement createState
    return _ListState();
  }
}

class _ListState extends State<ListPage> {
  List widgets = [];

  @override
  void initState() {
    super.initState();

    loadData();
  }

  int getItemCount() {
    if (widgets.isEmpty) {
      return 5;
    }
    return widgets.length;
  }

  Widget getItemWidget(int position) {
    if (widgets.isEmpty) {
      return getEmptyLoadingWidget();
    }
    return getRow(position);
  }

  Widget getEmptyLoadingWidget() {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                child: Text('**'),
              ),
              title: Text(
                "******",
                maxLines: 1,
                style: TextStyle(
                  color: Colors.blue,
                ),
                semanticsLabel: 'semanticsLabel',
              ),
              subtitle: Text("******"),
              trailing: Text('******'),
            ),
            Text('努力加载中...'),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Sample HTTP"),
        ),
        body: ListView.builder(
            itemCount: getItemCount(),
            itemBuilder: (BuildContext context, int position) {
              return getItemWidget(position);
            }));
  }

  Widget getRow(int i) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Card(
        child: ListTile(
          leading: CircleAvatar(
            child: Text('${widgets[i]["id"]}'),
          ),
          title: Text(
            "Row ${widgets[i]["title"]}",
            maxLines: 1,
            style: TextStyle(
              color: Colors.blue,
            ),
            semanticsLabel: 'semanticsLabel',
          ),
          subtitle: Text("Row ${widgets[i]["body"]}"),
          trailing: Text('userId:${widgets[i]["userId"]}'),
          onTap: () {},
          onLongPress: () {
            if (widgets.isNotEmpty) {
              showAboutDialog(
                applicationName: "Name",
                context: context,
                children: <Widget>[
                  Text('Title:${widgets[i]["title"]}'),
                  Divider(),
                  Text('Body:${widgets[i]["body"]}'),
                ],
              );
            }
          },
        ),
      ),
    );
  }

  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = json.decode(response.body);
    });
  }
}

---

未完待续。。。